<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <el-row>
            <el-col :span="20">
              <h3 id="title">{{article.title}}</h3>
            </el-col>
            <el-col :span="4">
              <span>
                <el-row>
                  <el-col :span="6" style="margin-top: 1vh">
                    <el-avatar :size="30" :src="author.avatar" /> 
                  </el-col>
                  <el-col :span="10">
                    <span id="authorname">{{' ' + author.nickname}}</span>
                  </el-col>
                </el-row>
              </span>
            </el-col>
          </el-row>
        </div>
        <el-row class="tags">
          <el-col :span="20">
            <span>
              <el-row :gutter="10">
                <el-col :span="3.3">
                  <span>标签:</span>
                </el-col>
                <el-col 
                  v-for="tag in article.tags" 
                  :key="tag"
                  :span="5.5">
                  <el-tag effect="plain">{{tag.name}}</el-tag>
                </el-col>
              </el-row>
            </span>
          </el-col>
          <el-col :span="4">
            <span>
              类别: <el-tag effect="plain" type="success">{{article.category}}</el-tag>
            </span>
          </el-col>
        </el-row>
        <el-row id="rooter">
          <el-col :span="3">
          </el-col>
          <el-col :span="10">
            <el-button :type="fav ? 'warning' : ''" round class="time1" @click="toFav(article.articleId)">
              <el-icon class="time-icon" :size="12"><Star /></el-icon>&nbsp;收藏
            </el-button>
          </el-col>
          <el-col :span="11">
            <el-rate
              v-model="article.score"
              show-score
              score-template="{value}"
              size="large"
              @change="handleChange(article.score, article.articleId)"
            />
          </el-col>
        </el-row>
      </template>
      <div class="ql-container ql-snow">
        <div class="ql-editor">
          <div v-html="article.content"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import api from '../../api/data.js'
import 'highlight.js/styles/default.css'
import { ElMessage } from 'element-plus'
import {Star} from '@element-plus/icons-vue'
export default {
  name: 'BlogArticle',
  components: {
    Star
  },
  data () {
    return {
      article: {},
      fav: false,
      author: {}
  }},
  methods: {
    toFav (id) {
      if (this.fav) {
        api.cancelCollection({
          token: this.$store.state.token,
          articleId: id,
        }).then((res) => {
          if (res.code === 342) {
            this.$store.commit('logout')
            this.$store.commit('tokenError')
            this.$router.push({path: '/login'})
          } else if (res.code < 300) {
            this.fav = false
            ElMessage({
              message: res.message,
              type: 'success',
            })
          } else {
            ElMessage.error(res.message)
          }
        })
      } else {
        api.collectArticle({
          token: this.$store.state.token,
          articleId: id,
        }).then((res) => {
          if (res.code === 342) {
            this.$store.commit('logout')
            this.$store.commit('tokenError')
            this.$router.push({path: '/login'})
          } else if (res.code < 300) {
            this.fav = true
            ElMessage({
              message: res.message,
              type: 'success',
            })
          } else {
            ElMessage.error(res.message)
          }
        })
      }
    },
    handleChange (val, id) {
      api.scoreArticle({
        token: this.$store.state.token,
        articleId: id,
        score: val
      }).then((res) => {
        if (res.code === 342) {
          this.$store.commit('logout')
          this.$store.commit('tokenError')
          this.$router.push({path: '/login'})
        } else if (res.code < 300) {
          ElMessage({
            message: res.message,
            type: 'success',
          })
        } else {
          ElMessage.error(res.message)
        }
      })
    },
  },
  mounted () {
    api.getArticleById({
      articleId: this.$route.query.articleId,
      token: this.$store.state.token
    }).then((res) => {
      if (res.code === 342) {
        this.$store.commit('logout')
        this.$store.commit('tokenError')
        this.$router.push({path: '/login'})
      } else if (res.code < 300) {
        this.article = res.data
        this.fav = res.data.hasCollection
        api.getUserInfo({
          userId: this.article.authorId,
          token: this.$store.state.token,
          currentPage: 1,
          pageSize: 1
        }).then((res) => {
          if (res.code === 342) {
            this.$store.commit('logout')
            this.$store.commit('tokenError')
            this.$router.push({path: '/login'})
          } else if (res.code < 300) {
            this.author = res.data.user
            this.author.avatar = api.baseUrl + this.author.avatar + '?r=' + Math.random()*1000
            // console.log(this.article)
          } else {
            ElMessage.error(res.message)
          }
        })
        // console.log(this.article)
      } else {
        ElMessage.error(res.message)
      }
    })
  },
}
</script>

<style scoped>
.box-card {
  margin-left: 25vw;
  width: 50vw;
}
#title {
  font-weight: 22px;
}
#rooter {
  margin-top: 2vh;
}
.time {
  font-size: 14px;
  color: #999;
  margin-left: 4px;
}
.time1 {
  margin-top: 4px;
}
.time2 {
  margin-top: 4px;
}
#authorname {
  text-align:center;
  line-height: 5vh;
}
.article >>> img{
  max-width: 90%;
}

</style>
